@import '../../styles/variables.scss';

.circle-container {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 100%;
  height: 100vh;
  padding: 0 36rpx;
  background: linear-gradient(180deg, $background-gradient-start 0%, $background-gradient-end 100%);
  
  .nav-placeholder {
    height: $nav-height;
  }
  
  .circle-search {
    padding: 40rpx 0;
    
    input {
      height: 80rpx;
      width: 100%;
      border-radius: 28rpx;
      background: $white;
      border: $border-width solid $border-color;
      font-size: 24rpx;
      font-weight: 400;
      padding: 22rpx 36rpx;
    }
  }
  
  /* 滚动容器：隐藏滚动条 + 自适应宽度 */
  .tab-scroll {
    width: 100%;
    height: 48rpx;
    
    ::-webkit-scrollbar {
      display: none;
    }
  }
  
  /* 标签容器：Flex横向排列 */
  .circle-tag-list {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    height: 48rpx;
    gap: 48rpx;
  }
  
  /* 标签基础样式 */
  .circle-tag-item {
    flex-shrink: 0;
    font-size: 32rpx;
    font-weight: 400;
    color: $text-color;
    
    /* 选中态样式：加粗 */
    &.circle-tag-active {
      font-size: 32rpx;
      font-weight: 700;
    }
  }
  
  .circle-scroll {
    margin-top: 26rpx;
    width: 100%;
    flex: 1;
    z-index: 999;
    overflow-y: auto;
    
    ::-webkit-scrollbar {
      display: none;
    }
  }
  
  .circle-list {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 28rpx;
    width: 100%;
    padding-bottom: 20rpx;
  }
  
  .qa-list {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow-y: auto;
    
    ::-webkit-scrollbar {
      display: none;
    }
    
    flex: 1;
    z-index: 999;
  }
  
  .science-list {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow-y: auto;
    
    ::-webkit-scrollbar {
      display: none;
    }
    
    flex: 1;
    z-index: 999;
  }
  
  .qa-add-button {
    top: 1285rpx;
    right: 5rpx;
    width: 90rpx;
    height: 100rpx;
    transform: rotate(-15deg);
    position: fixed;
    z-index: 10000;
    
    .qa-add-icon {
      width: 90rpx;
      height: 100rpx;
      transform: rotate(-15deg);
    }
  }
}
.tag-rope {
  position: absolute;
  top: 184rpx;
  left: 0;
  width: 100%;
  height: 40rpx;
  overflow: hidden;

  image {
    width: 100%;
    height: 40rpx;
  }
}

.circle-background {
  position: absolute;
  left: 0;
  bottom: -1rpx;
  z-index: 1;
  margin-top: 10rpx;
  width: 288rpx;
  height: 310rpx;
  opacity: 0.1;
}